<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片主体区域 -->
    <el-card class="box-card">
      <!-- 顶部提示框 -->
      <el-row>
        <el-col>
          <el-alert title="添加商品信息" type="success" show-icon center></el-alert>
        </el-col>
      </el-row>
      <!-- 进度条 -->
      <el-row>
        <el-col>
          <el-steps :space="200" :active="active-0" finish-status="success" class="el-steps">
            <el-step title="基本信息" name="0"></el-step>
            <el-step title="商品参数" name="1"></el-step>
            <el-step title="商品属性" name="2"></el-step>
            <el-step title="商品图片" name="3"></el-step>
            <el-step title="商品内容" name="4"></el-step>
            <el-step title="完成" name="5"></el-step>
          </el-steps>
        </el-col>
      </el-row>
      <!-- 左侧Tabs标签页 -->
      <el-row>
        <el-col>
          <el-tabs tab-position="left" @tab-click="tabsvalue" :before-leave="Beforeleave">
            <!-- 基本信息 -->
            <el-tab-pane label="基本信息" value="0" name="0">
              <el-form :model="Addgoods" :rules="rules" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="goods_name">
                  <el-input v-model="Addgoods.goods_name"></el-input>
                </el-form-item>

                <el-form-item label="商品价格" prop="goods_price">
                  <el-input v-model="Addgoods.goods_price">商品价格</el-input>
                </el-form-item>

                <el-form-item label="商品重量" prop="goods_weight">
                  <el-input v-model="Addgoods.goods_weight">商品重量</el-input>
                </el-form-item>

                <el-form-item label="商品数量" prop="goods_number">
                  <el-input v-model="Addgoods.goods_weight">商品数量</el-input>
                </el-form-item>
              </el-form>

              <!-- 级联选择框 -->
              请选择商品分类：
              <el-cascader
                v-model="canshuList"
                expandTrigger="hover"
                :options="GoodsList"
                :props="cateProps"
                @change="handleChange"
                clearable
                change-on-select
                class="widthcase"
              ></el-cascader>
            </el-tab-pane>
            <!-- 商品参数 -->
            <el-tab-pane label="商品参数" value="1">
              <el-form label-width="80px" v-for="item in Getmany" :key="item.attr_id">
                <el-form-item :label="item.attr_name">
                  <!-- 循环渲染每一项复选框数据 -->
                  <el-checkbox-group v-model="item.attr_vals">
                    <el-checkbox :label="val" v-for="(val,i) in item.attr_vals" :key="i"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <!-- 商品属性 -->
            <el-tab-pane label="商品属性" value="2">
              <el-form
                :model="Spinshuxing"
                label-width="80px"
                v-for="item in Getonly"
                :key="item.attr_id"
              >
                <span>{{item.attr_name}}</span>
                <el-form-item>
                  <el-input v-model="item.attr_vals"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <!-- 商品图片 -->
            <el-tab-pane label="商品图片" value="3">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-tab-pane>
            <!-- 商品内容 -->
            <el-tab-pane label="商品内容" value="4">
              <!-- 富文本编辑器 -->
              <quill-editor v-model="content" />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

                  
                  

<script>
export default {
  data() {
    return {
      // 级联选择框数据
      canshuList: [],
      //配置级联菜单中数据如何展示
      cateProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      Addgoods: {
        // 商品名称
        goods_name: 'a',
        // 商品价格
        goods_price: '100',
        // 商品重量
        goods_weight: '100',
        //商品数量
        goods_number: '999',
        //分类列表
        goods_cat: '',
        // 商品介绍
        goods_introduce: ''
      },
      //   级联选择器的数据
      GoodsList: [],
      //   定义添加分类表单的验证规则
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请选择商品分类', trigger: 'blur' }
        ]
      },
      //定义进度条需要的值
      active: '',
      //   获取动态参数需要的父类id
      id: '' - 0,
      //   获取到的动态参数存放地址
      Getmany: [],
      //获取到的静态参数存放地址
      Getonly: [],
      //   动态参数的attr_vals
      GetmanyVals: [],
      // 动态参数列表对象
      Spinshuxing: {
        // 分类参数名称
        attr_name: ''
      },
      // 富文本编辑器内容绑定
      content: ''
    }
  },
  created() {
    this.GoodsJL()
  },
  methods: {
    async tabsvalue(id) {
      console.log(id)

      this.active = id.index
      //   假如index等于一的时候代表点击商品参数 就渲染动态属性参数
      if (id.index == '1') {
        const { data: res } = await this.$http.get(
          `categories/${this.id - 0}/attributes`,
          {
            params: {
              sel: 'many'
            }
          }
        )
        if (res.meta.status !== 200) {
          return this.$message.error('获取动态列表数据失败')
        }
        this.$message.success('获取动态参数列表成功')
        console.log(res.data)

        this.Getmany = res.data
        //  通过循环把res.data.attr_vals转为数组

        console.log(res.data)

        res.data.forEach(i => {
          console.log(i)

          i.attr_vals = i.attr_vals.split(' ')
        })
        this.GetmanyVals = res.data
        console.log(this.GetmanyVals)

        // 获取静态参数id
      } else if (id.index == '2') {
        const { data: res } = await this.$http.get(
          `categories/${this.id - 0}/attributes`,
          {
            params: {
              sel: 'only'
            }
          }
        )
        if (res.meta.status !== 200) {
          return this.$message.error('获取静态列表数据失败')
        }
        this.$message.success('获取静态参数列表成功')
        console.log(res.data)
        this.Getonly = res.data
      }
    },
    //   获取级联选择器需要的数据
    async GoodsJL() {
      const { data: res } = await this.$http.get('categories', {
        params: {
          type: 3
        }
      })
      if (res.meta.status !== 200)
        return this.$message.error('获取父级列表列表失败')
      this.$message.success('获取父级列表成功')
      console.log(res.data)
      this.GoodsList = res.data
    },
    // 当级联选择框发生变化是触发函数
    handleChange(id) {
      if (this.canshuList.length !== 3) {
        this.canshuList = []
      }
      console.log(id[2])
      //  把获取到的级联选择框的数据父类id存放到id里
      this.id = id[2]
      console.log(this.id)
    },
    //阻止tbas切换
    Beforeleave(activeName, oldActiveName) {
      console.log(activeName)
      console.log(oldActiveName)
      if (oldActiveName == '0' && this.canshuList.length !== 3) {
        this.$message.error('请选择商品分类')
        return false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-steps {
  margin: 20px 80px;
}
.button {
  margin-bottom: 50px;
}
.ql-editor {
  height: 500px !important ;
}
</style>